:root {
    --main-padding: 3rem;
    /* Primitives: colors */
    --color-black: #000;
    --color-black-75: rgba(0, 0, 0, 0.75);
    --color-black-50: rgba(0, 0, 0, 0.50);
    --color-white: #fff;
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-zinc-50: #FAFAFA;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181B;
    --color-zinc-950: #09090b;
    /* Brand and products colors */
    --color-brand-primary: #901914;
    --color-sapphire-blue: #005B7F;
    --color-sapphire-blue-light: #157BA3;
    --color-tag-mandatory: #EFC398;
    --color-tag-voluntary: #DCEFB5;
    --color-beau-blue: #BFD8E4;
    --color-cosmic-latte: #F5F1E7;
    --color-brand-red-950: #450A0A;
    --color-violet-600: #7C3AED;
    /* Text colors */
    --color-text-base: var(--color-zinc-900);
    --color-text-inverse: var(--color-zinc-50);
    --color-text-muted: var(--color-zinc-600);
    --color-text-accent: var(--color-sapphire-blue);
    --color-text-accent-hover: var(--color-sapphire-blue-light);
    --color-text-brand: var(--color-brand-primary);
    --color-text-disabled: var(--color-zinc-400);
    --color-text-footer: var(--color-text-inverse);
    /* Background colors */
    --color-background-default: var(--color-white);
    --color-background-subtle: var(--color-zinc-100);
    --color-background-secondary: var(--color-zinc-300);
    --color-background-disabled: var(--color-zinc-400);
    --color-background-inverse: var(--color-zinc-900);
    --color-background-brand: var(--color-brand-primary);
    --color-background-surface-a: var(--color-cosmic-latte);
    --color-background-surface-b: var(--color-beau-blue);
    --color-background-surface-c: var(--color-sapphire-blue);
    --color-background-mandatory: var(--color-tag-mandatory);
    --color-background-voluntary: var(--color-tag-voluntary);
    --color-background-footer: var(--color-background-inverse);
    /* Button colors */
    --color-background-button-primary: var(--color-brand-primary);
    --color-background-button-light: var(--color-zinc-100);
    --color-background-button-dark: var(--color-zinc-900);
    --color-background-button-primary-hover: var(--color-brand-red-950);
    --color-background-button-light-hover: var(--color-zinc-200);
    /* Border colors */
    --color-border-default: var(--color-zinc-300);
    --color-border-darken: var(--color-zinc-400);
    --color-border-button-dark-outline: var(--color-zinc-900);
    --color-border-focus: var(--color-violet-600);
    /* Stacks */
    --display-stacks-2xs: 0.375rem;
    --display-stacks-xs: 0.5rem; /*bootstrap-2*/
    --display-stacks-sm: 0.75rem;
    --display-stacks-md: 1rem; /*bootstrap-3*/
    --display-stacks-lg: 1.5rem; /*bootstrap-4*/
    --display-stacks-xl: 2rem;
    --display-stacks-2xl: 3rem; /*bootstrap-5*/
    --display-stacks-3xl: 4rem;
    /* Insets */
    --display-insets-2xs: 0.25rem;
    --display-insets-xs: 0.5rem; /*bootstrap-2*/
    --display-insets-sm: 0.75rem;
    --display-insets-md: 1rem; /*bootstrap-3*/
    --display-insets-lg: 1.5rem; /*bootstrap-4*/
    --display-insets-xl: 3rem; /*bootstrap-5*/
    --display-insets-2xl: 4rem;
    --display-insets-3xl: 6rem;
    /* Corner radius */
    --display-corner-radius-xs: 0.25rem;
    --display-corner-radius-sm: 0.5rem;
    --display-corner-radius-md: 1rem;
    /* Buttons spacing */
    --button-padding-x: var(--display-insets-lg);
    --button-padding-y: var(--display-insets-sm);
    --button-large-padding-x: var(--display-insets-xl);
    --button-large-padding-y: var(--display-insets-lg);
    /* Card spacing */
    --card-padding-x: var(--display-insets-lg);
    --card-padding-y: var(--display-insets-lg);
    /* Banner spacing */
    --banner-padding-x: var(--display-insets-lg);
    --banner-padding-y: var(--display-insets-xl);
    /* Spacer */
    --spacer-padding: var(--display-stacks-lg);
}


@media screen and (min-width: 992px) {
    :root {
        /* Stacks */
        --display-stacks-xs: 0.5rem; /*bootstrap-2*/
        --display-stacks-sm: 1rem; /*bootstrap-3*/
        --display-stacks-md: 1.5rem; /*bootstrap-4*/
        --display-stacks-lg: 2rem;
        --display-stacks-xl: 3rem; /*bootstrap-5*/
        --display-stacks-2xl: 4rem;
        --display-stacks-3xl: 6rem;
        /* Buttons spacing */
        --button-padding-x: var(--display-insets-md);
        --button-padding-y: var(--display-insets-md);
        /* Card spacing */
        --card-padding-x: var(--display-insets-xl);
        --card-padding-y: var(--display-insets-xl);
        /* Banner spacing */
        --banner-padding-x: var(--display-insets-lg);
        --banner-padding-y: var(--display-insets-3xl);
    }
}

/*--color-border-darken: var();*/